<template>
  <div>
   <ArticleItem
    v-for="obj,index in arr"
    :key="index"
    :obj = "obj"
    @close="btn"
    @click.native="detailFn(obj)"
   ></ArticleItem>
    <!-- //反馈面板 -->
    <div>
        <van-action-sheet v-model="show" :actions="actions" @select="onSelect" get-container="html"
    cancel-text="取消"/>
    </div>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
export default {
  props: {
    arr: Array
  },
  data () {
    return {
      artid: '',
      show: false,
      actions: [
        { name: '不感兴趣' },
        { name: '反馈垃圾内容' },
        { name: '拉黑作者' }
      ],
      firstActions: [
        { name: '不感兴趣' },
        { name: '反馈垃圾内容' },
        { name: '拉黑作者' }
      ],
      secondActions: [
        {
          value: -1,
          name: '返回'
        },
        {
          value: 10,
          name: '其它问题'
        },
        {
          value: 1,
          name: '标题夸张'
        },
        {
          value: 2,
          name: '低俗色情'
        },
        {
          value: 3,
          name: '错别字多'
        },
        {
          value: 4,
          name: '旧闻重复'
        },
        {
          value: 6,
          name: '内容不实'
        },
        {
          value: 8,
          name: '侵权'
        },
        {
          value: 5,
          name: '广告软文'
        },
        {
          value: 7,
          name: '涉嫌违法犯罪'
        }
      ]
    }
  },
  methods: {
    btn (artid) {
      this.show = true
      this.artid = artid
    },
    onSelect (action) {
      console.log(action)
      // 默认情况下点击选项时不会自动收起
      if (action.name === '反馈垃圾内容') {
        this.actions = this.secondActions
      } else if (action.name === '返回') {
        this.actions = this.firstActions
      } else {
        this.$emit('action', action, this.artid)
        this.show = false
      }
    },
    detailFn (item) {
      this.$emit('detail', item)
    }
  },
  components: {
    ArticleItem
  }
}
</script>
